<template>
  <div class="popup-container" :style="{ width: isExpand ? '480px' : '20px' }">
    <div v-if="isExpand" class="h-[80%]">
      <div class="header flex h-[38px] w-full items-center justify-between">
        <slot name="headerLeft"></slot>
        <div class="flex-1">
          <slot name="headerRight"></slot>
        </div>
      </div>
      <div class="content h-full w-full flex-1 p-2">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
  <div
    class="expand-icon pointer-events-auto"
    :style="expandBgStyle"
    @click="onExpand"
  ></div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import Item from './Item.vue';

const isExpand = ref(true);
const onExpand = () => {
  isExpand.value = !isExpand.value;
};

const expandBgStyle = computed(() => {
  return {
    backgroundImage: isExpand.value
      ? "url('/static/screen/popup-close.png')"
      : "url('/static/screen/popup-expand.png')",
    left: isExpand.value ? '480px' : '21px',
  };
});
</script>

<style lang="scss" scoped>
.popup-container {
  padding: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  // width: 437px;
  height: 214px;
  background-image: url('/static/screen/popup-bg.png');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .content {
    display: flex;
    & div {
      flex: 0 1 50%;
      margin-right: 8px;
      & div {
        flex: 1;
      }
    }
  }
}

.expand-icon {
  position: absolute;
  bottom: 78px;
  width: 32px;
  height: 58px;
  background-size: 100% 100%;
}
</style>
